<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <title>躲避球游戏</title>
  <style>
    #gameCanvas {
      border: 1px solid #000;
    }

    .stats {
      margin: 10px 0;
      font-size: 18px;
    }

    .stats span {
      margin-right: 20px;
    }

    .game-over {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(0, 0, 0, 0.8);
      color: white;
      padding: 20px;
      border-radius: 10px;
      text-align: center;
    }

    #restartBtn {
      margin-top: 10px;
      padding: 5px 15px;
      font-size: 16px;
    }
  </style>
</head>

<body>
  <div class="stats">
    <span>食物: <span id="foodCount">0</span></span>
    <span>死亡: <span id="deathCount">0</span></span>
    <span>存活率: <span id="survivalRate">100%</span></span>
  </div>
  <canvas id="gameCanvas" width="500" height="500"></canvas>
  <div id="gameOver" class="game-over">
    <h2>游戏结束</h2>
    <p>最终得分: <span id="finalScore">0</span></p>
    <button id="restartBtn">重新开始</button>
  </div>

  <script src="js/AStar.js"></script>
  <script src="js/Player.js"></script>
  <script src="js/Monster.js"></script>
  <script src="js/Food.js"></script>
  <script src="js/Game.js"></script>
</body>

</html>